import { Button } from '@antmjs/vantui';
import { View } from '@tarojs/components';
import { useRouter, navigateBack } from '@tarojs/taro';
import { PLoadingCustom } from '@vh-mobile/pro-components';
import { eventsBus } from '@vh-mobile/pro-utils';
import { useEffect, useRef, useState } from 'react';

const AllEditPagePhoneList = () => {
  const router = useRouter();
  const propsRef = useRef<any>();
  const [dataSource, setDataSource] = useState<any>();

  useEffect(() => {
    const { dataIndex } = router.params;

    eventsBus.$trigger(`FOpenPageCustom-${dataIndex}`, {
      callback: (props: any) => {
        const { value } = props;
        propsRef.current = props;
        setDataSource(value);
      },
    });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onClick = () => {
    const data: any = [...dataSource];
    data.splice(0, 1);
    navigateBack();
    setTimeout(() => {
      propsRef.current.onChange(data);
    }, 100);
  };

  if (!dataSource) {
    return <PLoadingCustom />;
  }

  return (
    <View>
      {dataSource.map((item: any) => {
        return (
          <View key={item.key}>
            {item.name}-{item.hobby}
          </View>
        );
      })}
      <Button type="primary" block onClick={onClick}>
        点击修改数据
      </Button>
    </View>
  );
};

export default AllEditPagePhoneList;
